<template>
  <div class="register">
    <ParticlesBg />
    <img class="logo" :src="logo" alt="logo" />
    <div v-loading="loading" class="register-box">
      <div class="title">邮箱账号注册</div>
      <el-form ref="register" :model="formData" @validate="onValidate">
        <el-form-item
          prop="email"
          :rules="[
            {
              pattern: /[^\s]+@medlinker\.com/,
              message: '请输入公司邮箱',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <LimitInput
            v-model.trim="formData.email"
            clearable
            prefix-icon="el-icon-user"
            placeholder="请输入公司邮箱"
          ></LimitInput>
        </el-form-item>
        <el-form-item
          class="verify-code-item"
          prop="password"
          :rules="[
            { required: true, message: '请输入密码' },
            { min: 6, message: '最少6位密码', trigger: ['blur', 'change'] },
          ]"
        >
          <LimitInput
            v-model.trim="formData.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            type="password"
            :show-password="true"
          >
          </LimitInput>
        </el-form-item>
        <el-form-item
          class="verify-code-item"
          prop="confirmPassword"
          :rules="[
            {
              validator(rule, val, cb) {
                if (val !== formData.password) {
                  cb('两次输入的密码不一致');
                } else {
                  cb();
                }
              },
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <LimitInput
            v-model.trim="formData.confirmPassword"
            prefix-icon="el-icon-lock"
            placeholder="请再次输入密码"
            type="password"
            @keyup.enter.native="handleSubmit"
            :show-password="true"
          >
          </LimitInput>
        </el-form-item>
        <el-button class="register-btn" :disabled="disabled" type="primary" @click="handleSubmit">
          提交
        </el-button>
        <div class="login">
          已有账号？<el-button type="text" @click="goLogin">立即登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import logo from '@/assets/imgs/logo.png';
import ParticlesBg from '@/components/ParticlesBg';
import { mapState, mapMutations } from 'vuex';

export default {
  components: {
    ParticlesBg,
  },
  data() {
    return {
      loading: false,
      formData: {
        email: '',
        password: '',
        confirmPassword: '',
      },
      valided: {
        email: false,
        password: false,
        confirmPassword: false,
      },
      logo,
    };
  },
  computed: {
    disabled() {
      return !this.valided.email || !this.valided.password || !this.valided.confirmPassword;
    },
  },
  watch: {},
  created() {},
  methods: {
    register() {
      if (this.loading) {
        return false;
      }
      this.loading = true;
      this.$api('register', this.formData)
        .then(res => {
          this.loading = false;
          if (res.errcode == 0) {
            // this.$refs['register'].resetFields();
            this.$message.success({
              message: '注册成功，快去登录吧',
              duration: 1000,
              onClose: this.goLogin,
            });
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleSubmit() {
      this.$refs['register'].validate(valid => {
        if (valid) {
          this.register();
        }
      });
    },
    goLogin() {
      this.$router.replace('/account/login');
    },
    onValidate(valid, suc) {
      this.valided[valid] = suc;
    },
  },
};
</script>
<style lang="less" scoped>
.register {
  min-height: 100vh;
  background-color: #002140;
  display: flex;
  align-items: center;
  justify-content: center;
  .logo {
    height: 50px;
    margin-bottom: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .title {
    color: #001529;
    text-align: center;
    margin-bottom: 40px;
    font-size: 20px;
  }
  .register-box {
    background-color: #fff;
    position: relative;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
    padding: 40px 20px;
    form {
      min-width: 320px;
    }
  }
  .register-btn {
    display: block;
    width: 100%;
    margin-top: 30px;
    font-size: 14px;
  }
  .login {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
  }
  /deep/ .el-input__inner {
    border-radius: 0;
    border: none;
  }
  /deep/ .el-form-item__content {
    padding-bottom: 5px;
    border-bottom: 1px solid #dcdfe6;
  }
}
</style>
